<template>
    <div class="search">
        <h1>搜索</h1>
        <!-- $style开启css模块化以后 $style代表css对象 -->
        <!-- <input type="text" :class="$style.inputbox" ref="searchbox" v-model="keywords" @keydown.enter="showResult"/> -->
        <input type="text" ref="searchbox" v-model="keywords" @keydown.enter="showResult"/>
        <!-- 内置动态组件 它根据is属性来渲染不同的组件 -->
        <!-- keepAlive 组件 切换组件 没有真正卸载组件，组件被缓存 组件的生命周期函数只会在第一次创建的执行.
            后面就不会执行该组件的create mount unmount生命周期函数.
            include  允许缓存的组件 字符串 或 正则
            exclude  不需要缓存的组件 或 字符串
        -->
        <Transition name="sir">
            <KeepAlive :exclude="/Result/">
                <component :is="showname" :keywords="keywords"></component>
            </KeepAlive> 
        </Transition>

        <!-- 过渡动画 
            <Transition></Transition> 单个节点 显示或隐藏【v-if v-show component动态组件显示隐藏也会触发】的时候触发过渡动画
            <TransitionGroup></TransitionGroup> 用在列表 多个列表元素 当添加或删除的时候触发过渡动画
            enter
            leave
            支持用css来写对应过渡动画钩子 也支持js绑定钩子.
            css钩子的类名默认是 .v-开头
            name="sir"  .sir-
        -->
        <!-- <Result></Result> -->
        <button @click="shownum=!shownum">显示/隐藏</button>
        <KeepAlive>
            <AddNum v-if="shownum"></AddNum>
        </KeepAlive>
        <!-- 传送组件 把组件里面内容 渲染到 to=""选择器里面 -->
        <Teleport to="body">
            <!-- <div class="mask">
                弹框
            </div> -->
        </Teleport>
    </div>
</template>

<script>
    import HotSearch from './HotSearch.vue'
    import Result from './Result.vue'
    import Sugguest from './Sugguest.vue'
    import AddNum from './AddNum.vue'
    export default {
        data(){
            return {
                //直接根据组件名称 或 组件配置切换组件 不用注册组件
                showname:HotSearch,
                keywords:"",
                shownum:true
            }
        },
        mounted(){
            this.$refs.searchbox.focus();
            console.log("调用 模块化css之后的对象style",this.$style)
        },
        methods:{
            showResult(){
                this.showname=Result;
            }
        },
        watch:{
            //侦听属性的名称(newValue)
            keywords(newValue){
               if(newValue==""||newValue.length<=0){
                    this.showname=HotSearch;
               }else{
                    this.showname=Sugguest;
               }
            }
        },
        components:{
            AddNum
        }
    }
</script>

<style lang="scss" scoped>
// <style lang="scss" module>
//Scoped
// :deep(选择器){} 选择器可以作用到子组件
// :global(选择器){} 全局选择器
// :slotted(选择器){} 不会影响到插槽的内容
// module css模块化
// 需要设置 css-loader 开启模块化 {loader:"css-loader",options:{module:true}}
// 开启模块化css以后 这里面的css都挂载到 $style对象上面
.inputbox{
    width:100%;
    height:30px;
    background-color: gray;
}
.search{
    overflow: hidden;
    position: relative;
}
.mask{
    position: absolute;
    left:0px;
    top:0px;
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.5);
}
.sir-enter-from{
    opacity: 0;
}
.sir-enter-to{
    opacity: 1;
}
.sir-enter-active{
    transition: opacity 1s linear;
}
.sir-leave-from{
    opacity:1;
}
.sir-leave-to{
    opacity:0;
}
.sir-leave-active{
    transition: opacity 1s linear;
}
</style>